const safeDOM = {
  append(parent: HTMLElement, child: HTMLElement) {
    if (!Array.from(parent.children).some(e => e === child)) {
      parent.appendChild(child);
    }
  },
  remove(parent: HTMLElement, child: HTMLElement) {
    if (Array.from(parent.children).some(e => e === child)) {
      parent.removeChild(child);
    }
  },
};

// https://tobiasahlin.com/spinkit
// https://connoratherton.com/loaders
// https://projects.lukehaas.me/css-loaders
// https://matejkustec.github.io/SpinThatShit
// http://demo.htmleaf.com/1807/201807051431/index.html

function useLoading() {
  const styleContent = `
@keyframes r2 {
  100% { transform: rotate(360deg) }
}

@keyframes r2s1 {
  0% { transform: translate(0, 0) }
  25% { transform: translate(0, 18px)}
  50% { transform: translate(18px, 18px) }
  75% { transform: translate(18px, 0) }
}

@keyframes r2s2 {
  0% { transform: translate(0, 0) }
  25% { transform: translate(-18px, 0) }
  50% { transform: translate(-18px, 18px) }
  75% { transform: translate(0, 18px) }
}

@keyframes r2s3 {
  0% { transform: translate(0, 0) }
  25% { transform: translate(18px, 0) }
  50% { transform: translate(18px, -18px) }
  75% { transform: translate(0, -18px) }
}

@keyframes r2s4 {
  0% { transform: translate(0, 0) }
  25% { transform: translate(0, -18px) }
  50% { transform: translate(-18px, -18px) }
  75% { transform: translate(-18px, 0) }
}

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  place-content: center;
}

.shapes {
  position: relative;
  width: 30px;
  height: 30px;
  animation: r2 1s infinite;
}

.shape {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;

  &:nth-of-type(1) {
    left: 0;
    background-color: #5c6bc0;
    /* background-color: #1d84e0; */
    animation: r2s1 2s linear infinite;
  }

  &:nth-of-type(2) {
    right: 0;
    background-color: #8bc34a;
    /* background-color: #09c6cd; */
    animation: r2s2 2s linear infinite;
  }

  &:nth-of-type(3) {
    bottom: 0;
    background-color: #ffb74d;
    /* background-color: #09c6cd; */
    animation: r2s3 2s linear infinite;
  }

  &:nth-of-type(4) {
    bottom: 0;
    right: 0;
    background-color: #f44336;
    /* background-color: #1d84e0; */
    animation: r2s4 2s linear infinite;
  }
}
    `;
  const oStyle = document.createElement('style');
  const oDiv = document.createElement('div');

  oStyle.id = 'app-loading-style';
  oStyle.innerHTML = styleContent;
  oDiv.className = 'loading';
  oDiv.innerHTML = `
<div class="shapes">
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
</div>`;

  return {
    appendLoading() {
      safeDOM.append(document.head, oStyle);
      safeDOM.append(document.body, oDiv);
    },
    removeLoading() {
      safeDOM.remove(document.head, oStyle);
      safeDOM.remove(document.body, oDiv);
    },
  };
}

// ----------------------------------------------------------------------

const { appendLoading, removeLoading } = useLoading();

export { appendLoading, removeLoading };
